<template>
    <div class="hello">
        <p>欢迎登录后台管理系统</p>
        <!-- <el-carousel>
            <el-carousel-item v-for="item in carouselList" :key="item.index"  >
                <img :src="item" center>
            </el-carousel-item>
        </el-carousel> -->


        <el-carousel :interval="4000"  :height="bannerHeight+'px'">
            <el-carousel-item v-for="item in carouselList" :key="item">
            <img :src="item" class="bannerImg">
            </el-carousel-item>
        </el-carousel>



        <div id="clock"> 
            <p class="time">{{ time }}</p> 
        </div>
    </div>    
</template>

<script>
export default {
  data() {
    return {
      carouselList: [
        /* { src: '../../assets/banner3.jpg' },
                { src: '../../assets/banner2.jpg' },
                { src: '../../assets/banner1.jpg' } */
        require("../../assets/bj5.jpg"),
        require("../../assets/bj6.jpg"),
        require("../../assets/bj4.jpg")
      ],
      time: ""
    };
  },
  mounted() {
    setInterval(this.getDate, 1000);
    this.setSize();
    const that = this;
    window.addEventListener(
      "resize",
      function() {
        that.screenWidth = $(window).width();
        that.setSize();
      },
      false
    );
  },
  methods: {
    getDate() {
      this.time = this.$moment().format("YYYY年 MMMDo h:mm:ss a");
    },
    setSize() {
      this.bannerHeight = 740 / 2560 * this.screenWidth;
      if (this.bannerHeight > 740) this.bannerHeight = 740;
      if (this.bannerHeight < 360) this.bannerHeight = 360;
    }
  }
};
</script>

 <style lang="scss" scoped>
.hello {
  p {
    text-align: center;
    padding: 20px;
    font-size: 20px;
  }
  .el-carousel {
    margin-top: 100px;
    background-color: #545C64;
  }
  .bannerImg {
    width: 100%;
    height: inherit;
    min-height: 360px;
    min-width: 1400px;
  }
  #clock {
    font-family: "Microsoft YaHei", "Lantinghei SC", "Open Sans", Arial,
      "Hiragino Sans GB", "STHeiti", "WenQuanYi Micro Hei", "SimSun", sans-serif;
    color: #ffffff;
    text-align: center;
    position: absolute;
    color: #0f3854;
    top: 90%;
    left: 45%;
  }
  #clock .time {
    letter-spacing: 0.05em;
    font-size: 30px;
    padding: 5px 0;
  }
}
</style>



